<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich" >

	<ui:composition template="/templates/gerenciamento.xhtml" >
		<ui:define name="js">
		
		</ui:define>
		<ui:define name="css">
			<link rel="stylesheet" type="text/css" href="style/folha_gerenciamento.css" media="screen" />
			<link rel="stylesheet" type="text/css" href="style/logado.css" media="screen" />
			<link rel="stylesheet" type="text/css" href="style/styles.css" media="screen" />
			<style type="text/css">
			body {
				margin-left: 0px;
				margin-top: 0px;
				margin-right: 0px;
				margin-bottom: 0px;
			}
			</style>
		</ui:define>
		<ui:define name="mid">
			<h:form>
			
				<div id='cssmenu'>
					<ul>
						
						<li>
							<a4j:commandLink action="#{logadoBean.goGerenciamentoMeuUsaCardHistorico}">
								<span>HISTÓRICO</span>
							</a4j:commandLink>	
						</li>
						<li class='active'>
							<a4j:commandLink  >
								<span>CARTÂO ADICIONAL</span>
							</a4j:commandLink>
						</li>
						<li>
							<a4j:commandLink action="#{logadoBean.goGerenciamentoMeuUsaCardRecarregueSeuCartao}" >
								<span>RECARREGUE SEU CARTÃO</span>
							</a4j:commandLink>
						</li>
						<li>
							<a4j:commandLink action="#{logadoBean.goGerenciamentoMeuUsaCardGerencieSeuCartao}" >
								<span>GERENCIE SEU CARTÃO</span>
							</a4j:commandLink>
						</li>
						
					</ul>
				</div>
				<div class="inside_extrato">
				
				
					<div class="inside_A" align="center"><img src="images/cartao_adicional.jpg" width="310" height="300" /></div>
				    <div class="inside_C"></div>
					<div class="inside_B">
				   	  	<div class="cartao_adicional_p1">Nome completo</div>
				      	<div class="cartao_adicional_p3">
				      		<h:inputText value="#{cartaoAdicionalBean.nomeCompleto}" style="width:200px;"/>
				      	</div>
				      	<div class="cartao_adicional_p3">Como ficará o nome no cartão</div>
				      	<div class="cartao_adicional_p3">
				      		<h:inputText value="#{cartaoAdicionalBean.cartaoAdicional.nominal}" style="width:200px;"/>
				      	</div>
				      	<div class="cartao_adicional_p3">Grau de parentesco</div>
				        	<div class="cartao_adicional_p4">
				          		<h:selectOneMenu id="parentescoField" value="#{cartaoAdicionalBean.grauParentesco}" converter="grauParentescoConverter" style="width:160px">
	       	    					<f:selectItem itemLabel="Grau de Parentesco" noSelectionOption="true" />
		          					<f:selectItems value="#{cartaoAdicionalBean.grauParentencos}" var="grau" itemLabel="#{grau.nome}" itemValue="#{grau}" />
		          		  		</h:selectOneMenu>
				        	</div>
				      	<div class="cartao_adicional_p4" id="link3_" align="right"> 
				      		<a4j:commandLink action="#{cartaoAdicionalBean.solicitar}" value="Solicitar" />
				      	</div>
				    </div>				
				
				</div>
			

			</h:form>
		</ui:define>
	</ui:composition>

</html>